<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .nav_wrap{
            height: 400px;
            width: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        .nav_ul{
            height: 100%;
            width: 220px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .nav_li{
            border: 1px solid #ccc;
            margin: -1px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            width: 200px;
        }
        .btn_wrap{
            text-align: center;
        }
    </style>
</head>
<body>
<div class= "nav_wrap">
    <ul class= "nav_ul">
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
        <li class="nav_li">我是菜单1</li>
        <li class="nav_li">我是菜单2</li>
    </ul>
</div>
</body>
</html>